<template>
  <div class="header">
    <!-- <div class="leftIcon">
      <span style="cursor:pointer" @click="gotoLeft">
        <svg-icon icon-class="left2" />
      </span>
    </div> -->
    <div ref="scrollDom" class="HorizontalMenu">
      <el-menu
        mode="horizontal"
        background-color="rgba(255,255,255,0.10)"
        text-color="#fff"
        active-text-color="#faad14"
        :default-active="activeIndex"
      >
        <!-- :get-width="getWidth" @fatherMethod="getreport" -->
        <horizontalItemMenu ref="horizontalItemMenu" :nav-menus="dealDate" :get-width="getWidth" />
      </el-menu>
    </div>
    <div class="iconClass">
      <span style="cursor:pointer" @click="gotoLeft">
        <svg-icon icon-class="left2" />
      </span>
      <span style="cursor:pointer" @click="gotoRight">
        <svg-icon icon-class="right2" />
      </span>
    </div>
    <!-- <div class="rightIcon">
      <span style="cursor:pointer" @click="gotoRight">
        <svg-icon icon-class="right2" />
      </span>
    </div> -->
  </div>
</template>

<script>
import horizontalItemMenu from '@/components/horizontalItemMenu/index.vue';
import { mapGetters } from 'vuex';
export default {
  name: 'HorizontalMenu',
  components: {
    horizontalItemMenu
  },
  data() {
    return {
      dealDate: [],
      getWidth: '',
      activeIndex: ''
    };
  },
  computed: {
    ...mapGetters([
      'permission_routes'
    ])
  },
  created() {
    const a = this.permission_routes.filter((value, index, arr) => {
      return value.meta && value.path !== '/bussinessPage' && value.path !== '/ceshi' && value.path !== '/KqHeaderPage';
    });
    var objString = JSON.stringify(a);
    this.dealDate = JSON.parse(objString);
    // 去除children
    this.dealDate.map(item => {
      delete item['children'];
    });
    // 排序
    this.dealDate.sort((a, b) => Number(a.orderId) - Number(b.orderId));
    this.getWidth = this.dealDate.length * 140 + 'px';
  },
  methods: {
    // 点击水平菜单向右滑动
    gotoRight() {
      this.$refs.scrollDom.scrollLeft += 240;
    },
    // 点击水平菜单向左滑动
    gotoLeft() {
      this.$refs.scrollDom.scrollLeft -= 240;
    }
  }
};
</script>

<style lang="scss" scoped>

.HorizontalMenu {
    overflow: hidden;
    width: calc(100vw - 70px);
    margin-left: 1%;
    transition: 2s;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  background-color: rgba(255,255,255,0.10);
    // background-color: rgb(50,80,97);
}
.header{
  display:flex;
  position:relative;
}
.leftIcon{
   background-color: #7575756b;
   line-height: 60px;
   height: 60px;
   position: absolute;
   left: 0px;
   z-index: 999;
}
.rightIcon{
    background-color: #7575756b;
    line-height: 60px;
    height: 60px;
    position: absolute;
    right: 0px;
    z-index: 999;
}
.iconClass{
  background-color: rgba(255,255,255,0.10);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  line-height: 50px;
  width: 35px;
  text-align: center;
}
.iconClass /deep/ .svg-icon {
    width: 15px !important;
    height: 15px !important;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 1.2rem;
}

.HorizontalMenu /deep/ .el-menu-item{
    padding: 0 25px !important;
    background-color: transparent !important;
}
.HorizontalMenu /deep/  .el-menu-item.is-active {
   background-color: transparent !important;
    font-weight: 800 !important;
    color: #faad14 !important;
}
/deep/.el-menu{
   background-color: transparent !important;

}
</style>
